<template>
	<view class="content">
		<div class="my_work_box">
			<div class="titlebox">
				<text style="color: white;font-size: 21px;font-weight:bold" @click="showUID()">我的</text>
			</div>
			<div class="userbox">
				<template v-if="username!=null">
					<div class="userAvatar" @click="showSettingCard()">
						<image src="/static/avatar.png" style="width: 70px;height: 70px;"></image>
					</div>
					<div class="userNickName" @click="showSettingCard()">
						<text>{{ username }}</text>
						<text style="font-size: 16px;margin-top: 5px;">{{ mycollege }}</text>
						<text style="font-size: 16px;margin-top: 5px;">{{ mygrade }}</text>
					</div>
				</template>
				<template v-else>
					<div class="userAvatar" @click="showpopup()">
						<open-data type="userAvatarUrl"></open-data>
					</div>
					<div class="userNickName" @click="showpopup()">
						<text>未登录账号</text>
					</div>
				</template>
			</div>
			<div class="functioncard">
				<div v-for="item in funList" class="function_bar" @click="func(item)">
					<text class="funcText">{{ item }}</text>
				</div>
				<div v-if="userauthority!=null" class="function_bar" @click="toProcess()">
					<text class="funcText">Event审核（开发者模式）</text>
				</div>
			</div>
		</div>
		<div class="mask" v-if="isActive||isMask" :class="{'active':isMask}" @click="hidepopup()"></div>
		<div class="popup" :class="{'active':isActive,'input':isLogin===false}">
			<image src="/static/logo.png" style="border-radius: 10px;height: 90px;width: 90px;margin: 30px 0 10px;">
			</image>
			<text style="font-size: 20px;font-weight: bold;letter-spacing:1px;">小城知讯</text>
			<button v-if="isLogin"
				style="border-radius: 28px;background-color: black;color: white;width: 90%;margin: 40px auto;"
				@click="getUserinfo()">微信一键登陆</button>
			<div v-if="isLogin===false" class="registerLayout">
				<div class="setbody">
					<text>昵称：</text>
					<input type="nickname" v-model="registerName" style="padding-left: 2px; " placeholder="请输入昵称" />
				</div>
				<div class="setbody">
					<picker style="width: 100%;" @change="pickCollage($event)" mode="selector"
						:range="selectCollegeList">学院：{{ college }}</picker>
					<image src="/static/pull.png" style="width: 20px;height: 20px;"></image>
				</div>
				<div class="setbody">
					<picker style="width: 100%;" @change="pickGrade($event)" mode="selector" :range="selectGradeList">
						年级：{{ grade }}</picker>
					<image src="/static/pull.png" style="width: 20px;height: 20px;"></image>
				</div>
				<button style="border-radius: 28px;background-color: black;color: white;width: 90%;margin: 30px auto;"
					@click="regist()">注册</button>
			</div>
		</div>
		<div v-if="isSetting" class="setting_card">
			<div class="settingcard-head">
				<text style="color: red;" @click="hidesetting()">取消</text>
				<text style="color: #007AFF;" @click="changeuserinfo()">修改</text>
			</div>
			<div class="settingLayout">
				<div class="setbody">
					<text>昵称：</text>
					<input v-model="tempname" style="padding-left: 2px;" />
				</div>
				<div class="setbody">
					<picker style="width: 100%;" @change="picktempCollage($event)" mode="selector"
						:range="selectCollegeList">学院：{{ tempcollege }}</picker>
					<image src="/static/pull.png" style="width: 20px;height: 20px;"></image>
				</div>
				<div class="setbody">
					<picker style="width: 100%;" @change="picktempGrade($event)" mode="selector"
						:range="selectGradeList">年级：{{ tempgrade }}</picker>
					<image src="/static/pull.png" style="width: 20px;height: 20px;"></image>
				</div>
				<button style="border-radius: 28px;background-color: black;color: white;width: 90%;margin: 30px auto;"
					@click="exituser()">退出账号</button>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		onShareAppMessage() {},
		onShareTimeline() {},
		data() {
			return {
				//显示数据
				username: null,
				mycollege: '',
				mygrade: '',
				userauthority:'',
				selectGradeList: ['2021级', '2022级', '2023级', '2024级', '2025级', '2023级（专升本）', '2024级（专升本）', '2025级（专升本）'],
				selectCollegeList: ['电气工程与智能制造学院', '建筑与土木学院', '经济管理学院', '人文学院', '建筑管理学院', '艺术与传媒学院', '人工智能与大数据学院',
					'体育与大健康学院', '继续教育学院', '马克思主义学院'
				],
				funList: ['联系我们', '开源计划', '同步数据', '关于小程序', '常见问题'],
				//注册提交数据
				registerName: '',
				college: '',
				grade: '',
				isSetting: false,
				isLogin: true,
				isActive: false,
				isMask: false,
				tempopenid: null,
				tempuserkey: null,
				userinfo: [],
				//修改的数据
				tempname: '',
				tempcollege: '',
				tempgrade: '',
				clickCount: 0,
				timer: null,
			}
		},
		onPullDownRefresh: function() {
			this.getStorageinfo()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			this.getStorageinfo()

		},
		onUnload() {
			this.resetCounter();
		},
		methods: {
			getStorageinfo() {
				var Storageuserinfo = uni.getStorageSync('Storageuser')
				this.tempopenid = Storageuserinfo.id
				this.mycollege = Storageuserinfo.college
				this.mygrade = Storageuserinfo.grade
				this.username = Storageuserinfo.name
				this.userauthority=Storageuserinfo.authority
			},
			showpopup() {
				this.isActive = true
				this.isMask = true
			},
			hidepopup() {
				this.isActive = false
				setTimeout(() => {
					this.isLogin = true
					this.registerName = ''
					this.college = ''
					this.grade = ''
				}, 500)
				this.isMask = false
				this.hidesetting()
			},
			func(item) {
				let opencontent = '小城知讯坚持技术共享的原则，欢迎各位交流借鉴';
				let content = "官方交流群：765016926<br>官方邮箱：<br>service@lemonscloud.cn";
				content = content.replace(/<br>/g, "\n");
				if (item === '关于小程序') {
					uni.navigateTo({
						url: '/pages/about/about'
					})
				}
				if (item === '常见问题') {
					uni.navigateTo({
						url: '/pages/about/questions'
					})
				}
				if (item === '联系我们') {
					uni.showModal({
						title: '联系我们',
						content: content,
						cancelText: '知道了',
						confirmText: '复制群号',
						confirmColor: '#007AFF',
						position: 'center',
						success: function(res) {
							if (res.confirm) {
								uni.setClipboardData({
									data: '765016926',
									success() {
										uni.showToast({
											title: '已复制群号',
											icon: 'none',
											position: 'bottom'
										})
									}
								})
							}
						}
					});
				}
				if (item === '开源计划') {
					console.log(item)
					uni.showModal({
						title: '开源计划',
						content: opencontent,
						cancelText: '知道了',
						confirmText: '复制仓库',
						confirmColor: '#007AFF',
						position: 'center',
						success: function(res) {
							if (res.confirm) {
								uni.setClipboardData({
									data: 'https://gitee.com/krisit/college-news.git',
									success() {
										uni.showToast({
											title: '已复制仓库地址',
											icon: 'none',
											position: 'bottom'
										})
									}
								})
							}
						}
					});
				}
				if (item === '同步数据') {
					uni.getStorageInfo({
						success: (res) => {
							if (res.keys.includes('Storageuser')) {
								this.postjson(uni.getStorageSync('work'))
							} else {
								uni.showToast({
									title: '请先登陆',
									duration: 2000,
									icon: 'error'
								})
							}
						}
					})
				}
			},
			postjson(tempwork) {
				uni.showLoading({
					title: '上传中'
				})
				uni.removeStorageSync('work')
				uni.request({
					url: 'https://127.0.0.1/data/up_json.php',
					method: 'POST',
					header: {
						'content-type': 'application/json',
					},
					data: {
						name: this.tempopenid,
						info: tempwork,
					},
					success: res => {
						uni.hideLoading()
						uni.showToast({
							title: '同步成功',
							icon: 'success',
							duration: 1000
						})
						console.log(res.data)
						return res.data
					},
					fail: err => {
						console.log(res.err)
						return res.err
					},
				});
			},
			getUserinfo() {
				uni.showLoading({
					title: '登陆中'
				})
				setTimeout(() => {
					uni.hideLoading()
					if (this.username === '') {
						uni.showToast({
							title: '登陆超时',
							duration: 2000,
							icon: 'error'
						})
						this.hidepopup()
					}
				}, 5000);
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true,
					success: (res) => {
						uni.request({
							url: 'https://127.0.0.1/data/getinfo.php',
							method: 'POST',
							header: {
								'content-type': 'application/json',
							},
							data: res.code,
							success: (res) => {
								console.log(res)
								this.tempopenid = res.data.openid
								this.userlogin()
								uni.hideLoading()
							}
						})
					}
				})
			},
			userlogin() {
				uni.request({
					url: 'https://127.0.0.1/data/login.php',
					method: 'POST',
					header: {
						'content-type': 'application/json',
					},
					data: this.tempopenid,
					success: (res) => {
						if (res.data.error === '未找到数据') {
							this.isLogin = false
						} else {
							this.username = res.data.name
							this.mycollege = res.data.college
							this.mygrade = res.data.grade
							this.userauthority=res.data.authority
							let storageuserinfo = {
								"id": this.tempopenid,
								"name": this.username,
								"college": this.mycollege,
								"grade": this.mygrade,
								"authority":this.userauthority
							}
							uni.setStorageSync("Storageuser", storageuserinfo)
							this.hidepopup()
						}
					}
				})
			},
			pickCollage(e) {
				var index = e.target.value
				this.college = this.selectCollegeList[index]
			},
			pickGrade(e) {
				var index = e.target.value
				this.grade = this.selectGradeList[index]
			},
			showSettingCard() {
				this.isSetting = true
				this.isMask = true
				this.tempcollege = this.mycollege
				this.tempgrade = this.mygrade
				this.tempname = this.username
			},
			picktempCollage(e) {
				var index = e.target.value
				this.tempcollege = this.selectCollegeList[index]
			},
			picktempGrade(e) {
				var index = e.target.value
				this.tempgrade = this.selectGradeList[index]
			},
			hidesetting() {
				this.isSetting = false
				this.isMask = false
				this.tempname = ''
				this.tempgrade = ''
				this.tempname = ''
			},
			regist() {
				if (this.registerName === '' || this.grade === '' || this.college === '') {
					uni.showToast({
						title: '请输入完整',
						duration: 2000,
						icon: 'none'
					})
				} else {
					let userinfo = {
						"id": this.tempopenid,
						"name": this.registerName,
						"college": this.college,
						"grade": this.grade
					}
					uni.request({
						url: 'https://127.0.0.1/data/register.php',
						method: 'POST',
						header: {
							'content-type': 'application/json',
						},
						data: userinfo,
						success: (res) => {
							if (res.data === 'New record created successfully') {
								this.getUserinfo()
							} else {
								uni.showToast({
									title: '注册失败，请再试一下',
									duration: 2000,
									icon: 'none'
								})
							}
						}
					})
				}
			},
			exituser() {
				uni.showModal({
					title: '确定退出账号？',
					content: '退出账号后将会丢失未同步的数据',
					position: 'center',
					confirmColor: '#007AFF',
					success: function(res) {
						if (res.confirm) {
							this.hidesetting()
							uni.showLoading({
								title: '正在退出'
							})
							setTimeout(() => {
								uni.removeStorageSync('Storageuser')
								uni.removeStorageSync('work')
								this.username = ''
								this.mycollege = ''
								this.mygrade = ''
								this.userauthority=''
								uni.hideLoading()
								uni.startPullDownRefresh()
							}, 500)
						}
					}.bind(this)
				})
			},
			changeuserinfo() {
				uni.showLoading({
					title: '修改中'
				})
				let newuserinfo = {
					"id": this.tempopenid,
					"name": this.tempname,
					"college": this.tempcollege,
					"grade": this.tempgrade
				}
				uni.request({
					url: 'https://127.0.0.1/data/modifyuserinfo.php',
					method: 'POST',
					header: {
						'content-type': 'application/json',
					},
					data: newuserinfo,
					success: (res) => {
						if (res.data === '记录更新成功') {
							this.hidesetting()
							uni.hideLoading()
							uni.showToast({
								title: '修改成功',
								duration: 1000,
								icon: 'success'
							})
							setTimeout(() => {
								uni.startPullDownRefresh()
								uni.setStorageSync("Storageuser", newuserinfo)
							}, 1000)
						}
					}
				})
			},
			toProcess() {
				uni.navigateTo({
					url: '/pages/particular/process'
				})
			},
			showUID() {
				if (this.timer) {
					clearTimeout(this.timer);
				}
				this.clickCount++;
				if (this.clickCount === 5) {
					uni.showModal({
						title: '你的UID',
						content: this.tempopenid,
						cancelText: '知道了',
						confirmText: '复制UID',
						confirmColor: '#007AFF',
						position: 'center',
						success: function(res) {
							if (res.confirm) {
								uni.setClipboardData({
									data: this.tempopenid,
									success() {
										uni.showToast({
											title: '已复制UID',
											icon: 'none',
											position: 'bottom'
										})
									}
								})
							}
						}
					});
					this.resetCounter();
					return;
				}
				this.timer = setTimeout(() => {
					this.resetCounter();
				}, 2000);
			},
			resetCounter() {
				this.clickCount = 0;
				if (this.timer) {
					clearTimeout(this.timer);
					this.timer = null;
				}
			},
		}
	}
</script>

<style>
	template {
		height: 100%;
		width: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: left;
		justify-content: center;
		background: linear-gradient(135deg, #007aff 0%, #43a2f8 38%, #ffffff 100%);
	}

	.titlebox {
		top: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 21px;
		margin-bottom: 30px;
		letter-spacing: 1px;
	}

	.my_work_box {
		margin: 13% 0 0 0;
		display: flex;
		flex-direction: column;
		align-items: left;
		justify-content: center;
	}

	.userbox {
		height: 80px;
		border-radius: 15px;
		margin: 0 5px 30px;
		display: flex;
		flex-direction: row;
		justify-content: left;
		align-items: center;
	}

	.userAvatar {
		border-radius: 100%;
		width: 70px;
		height: 70px;
		margin-left: 20px;
		overflow: hidden;
	}

	.userNickName {
		display: flex;
		flex-direction: column;
		color: white;
		font-size: 20px;
		margin: 0 0 5px 25px;
	}

	.functioncard {
		display: flex;
		flex-direction: column;
		border-radius: 16px 16px 0 0;
		background-color: #f8f8f8;
		flex: 1;
	}

	.function_bar {
		height: 50px;
		width: 100%;
		border-bottom: 0.5px solid grey;
		display: flex;
		align-items: center;
	}

	.funcText {
		font-size: 16px;
		margin: 0 15px;
	}

	.mask {
		position: fixed;
		height: 100%;
		width: 100%;
		background-color: grey;
		opacity: 0;
		bottom: 0;
		transition: opacity 0.5s ease-in-out;
	}

	.mask.active {
		opacity: 0.5;
	}

	.popup {
		position: fixed;
		display: flex;
		align-items: center;
		flex-direction: column;
		border-style: solid;
		box-shadow: #f1f1f1;
		border-color: #f1f1f1 #f1f1f1 #f8f8f8 #f1f1f1;
		border-radius: 24px 24px 0 0;
		bottom: 0;
		width: 100%;
		height: 280px;
		background-color: #f8f8f8;
		z-index: 999;
		transform: translateY(100%);
		transition: all 0.5s ease;
	}

	.popup.active {
		transform: translateY(0);
	}

	.popup.input {
		height: 400px;
	}

	.registerLayout {
		display: flex;
		flex-direction: column;
		margin-top: 20px;
	}

	.settingLayout {
		display: flex;
		flex-direction: column;
		margin-top: 5px;
	}

	.setbody {
		padding-left: 10px;
		padding-right: 10px;
		background-color: white;
		border-radius: 7px;
		height: 30px;
		margin-top: 10px;
		display: flex;
		flex-direction: row;
		font-size: 18px;
		align-items: center;
		justify-content: space-between;
	}

	.setting_card {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border-style: solid;
		box-shadow: #f1f1f1;
		border-color: #f1f1f1 #f1f1f1 #f8f8f8 #f1f1f1;
		border-radius: 24px;
		top: 0px;
		left: 10%;
		margin: auto;
		width: 79%;
		height: 280px;
		background-color: #f8f8f8;
		z-index: 999;
		transform: translateY(100%);
		transition: all 0.5s ease;
	}

	.settingcard-head {
		width: 87%;
		margin: 5% 0 3%;
		display: flex;
		justify-content: space-between;
	}
</style>